@page
@{ Layout = "_LayoutHome"; }
@section Styles{
    <style>
        body {
            padding: 0;
            margin: 0;
            background: #ffffff;
            overflow:hidden;
        }

        html {
            padding: 0;
            margin: 0;
            background: #ffffff;
            overflow: hidden;
        }
    </style>
}
<div style="width:238px;position:fixed;">
    <div :style="{height: (winHeight) + 'px'}">
        <div class="rounded-0 shadow p-3">
            <div class="row align-items-center">
                <div class="col-xl-12 col-lg-12 col-md-12 col-12 text-center fw-bolder">
                    <i class="bi bi-star-fill me-2"></i>学习中心
                </div>
            </div>
        </div>
        <div class="p-5">
            <button type="button" class="btn w-100 rounded-pill border-0 fw-normal" :class="studyCurrent==='plan'?'btn-dark button-fa':'btn-outline-dark'" v-on:click="btnStudyClick('plan')">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        学习任务
                    </div>
                    <div><i class="el-icon-star-on"></i></div>
                </div>
            </button>
            <button type="button" class="btn w-100 rounded-pill border-0 fw-normal mt-2" :class="studyCurrent==='course'?'btn-dark button-fa':'btn-outline-dark'" v-on:click="btnStudyClick('course')">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        课程中心
                    </div>
                    <div><i class="el-icon-caret-right"></i></div>
                </div>
            </button>
            <button type="button" class="btn w-100 rounded-pill border-0 fw-normal mt-2" :class="studyCurrent==='last'?'btn-dark button-fa':'btn-outline-dark'" v-on:click="btnStudyClick('last')">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        上次学习
                    </div>
                    <div><i class="el-icon-caret-right"></i></div>
                </div>
            </button>
            <button type="button" class="btn w-100 rounded-pill border-0 fw-normal mt-2" :class="studyCurrent==='collect'?'btn-dark button-fa':'btn-outline-dark'" v-on:click="btnStudyClick('collect')">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        课程收藏
                    </div>
                    <div><i class="el-icon-caret-right"></i></div>
                </div>
            </button>
        </div>
    </div>
</div>
<div style="margin-left:238px;height:100%;">
    <iframe id="studyFrame" ref="studyFrame" :src="studyUrl" style="width: 100%;height:100%; border: none;" :style="{height: (winHeight) + 'px'}"></iframe>
</div>
@section Scripts{
    <script src="/sitefiles/assets/js/home/study/studyIndex.js" type="text/javascript"></script>
}
